<template>
  <div ref="chartRef" class="charts"></div>
</template>

<script lang="ts" setup>
import {onMounted, ref, watch} from "vue";
import * as echarts from "echarts";
import {usePipeStore} from "../../../store/pipe";
const pipeStore = usePipeStore()

let option = {
  title: {
    text: '预警趋势图',

  },
  tooltip: {
    trigger: 'axis',
    axisPointer: {
      type: 'cross',
      label: {
        backgroundColor: '#6a7985'
      }
    }
  },
  legend: {
    data: ['压力', '流量', '水质']
  },
  toolbox: {
    // feature: {
    //   saveAsImage: {}
    // },
  },
  grid: {
    left: '1%',
    right: '1%',
    bottom: '3%',
    top: '%10',
    containLabel: true
  },
  xAxis: [
    {
      type: 'category',
      boundaryGap: false,
      data: [] as any[]
    }
  ],
  yAxis: [
    {
      type: 'value'
    }
  ],
  series: [
    {
      name: '压力',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [] as any[]
    },
    {
      name: '流量',
      type: 'line',
      stack: 'Total',
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [] as any[]
    },
    {
      name: '水质',
      type: 'line',
      stack: 'Total',
      label: {
        show: true,
        position: 'top'
      },
      areaStyle: {},
      emphasis: {
        focus: 'series'
      },
      data: [] as any[]
    }
  ]
};

pipeStore.pressureData.forEach(item => {
  option.xAxis[0].data.push(item.turnoverTime)
  option.series[0].data.push(item.hydraulicPressure)
  option.series[1].data.push(item.flow)
  option.series[2].data.push(item.waterQuality)
})
console.log(pipeStore.pressureData)
const chartRef = ref<HTMLDivElement|null>(null)
onMounted(() => {
  if(chartRef.value){
    let myChart = echarts.init(chartRef.value as HTMLDivElement);
    myChart.setOption(option)
    watch(pipeStore.pressureData, () => {
      if (1) myChart.setOption(option)
    }, {deep: true, immediate: true})
  }
})
</script>

<style scoped>
.charts {
  width: 960px;
  height: 500px;
  margin-top: 12px;
}
</style>
